<template>
  <div>
    <div class="config">
      <p>审核结果</p>
    </div>
     <div class="con">
         <div class="bg1"></div>
         <div class="bg2">
             <div class="check">
             <img src="../assets/images/shenhe_.png" alt="">
             <p>审核不通过!</p>
            </div>
            <div class="reason">
                <p>原因如下:</p>
                <p>1.姓名与身份证上的不一致</p>
                <p>2.身份证模糊看不清,请重新上传</p>
            </div>
            <router-link to="/updateIndex">
                <div class="btn">
                    <button>重新认证</button>
                </div>
            </router-link>

         </div>   
     </div>
   


  </div>
</template>

<script>
export default {
    name: "checkError",
    data() {
        return {};
    },
      beforeCreate() {
        document.getElementsByTagName("body")[0].style.background= "#5aa0c8";
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.con {
    width: 100vw;
    height: 92vh; 
    position: absolute;
    bottom: 0px;
    margin-top: 50px;
}

.con .bg1 {
    width: 90%;
    height: 65vh;
    background: #dae7ef;
    left: 5%;
    border-radius: 5px;
    position: absolute;
    top: 10%;
}
.con .bg2 {
    width: 86%;
    height: 67vh;
    background: #fff;
    left: 7%;
    border-radius: 5px;
    position: absolute;
    top: 9%;
}

.con .check{  
    margin-top: 8vh;    
    text-align: center;
}
.con .check img{
    width: 80px;
}
.con .check p{
    margin-top: 10px;
    color: #ff836a;
}

.con .reason{      
      margin-left: 30px;
      margin-top: 5vh;
    
}
.con .reason p:first-child{
    color: #5aa0c8;
}

.btn {
  width: 100%;
}

.btn button {
  width: 60%;
  height: 40px;
  background: #5aa0c8;
  border: none;
  color: #fff;
  outline: none;
  margin-left: 20%;
  margin-top: 5vh;
  border-radius: 5px;

}

</style>
